<template>
  <view class="bd t1">
    <view class="inp-group flex flex-al-c">
      <view class="inp-title">身高(CM)</view>
      <u-input
        v-model="height"
        type="number"
        :border="true"
        placeholder="请输入身高"
        @input="checkNum($event, 1)"
      />
    </view>
    <view class="inp-group flex flex-al-c">
      <view class="inp-title">体重(KG)</view>
      <u-input
        v-model="weight"
        class="t1"
        type="number"
        :border="true"
        placeholder="请输入体重"
        @input="checkNum($event, 2)"
      />
    </view>
    <view class="inp-group flex flex-al-c">
      <view class="inp-title">采集日期</view>
      <!-- <picker mode="date" :value="collectTime" @change="dateChange1" style="width: 100%;"><view>{{visitTime}}</view></picker> -->
      <u-input
        v-model="collectTime"
        type="text"
        :border="true"
        @tap="checkTime"
        disabled
      />
      <u-picker
        mode="time"
        v-model="show"
        :params="params"
        @confirm="getTime"
      ></u-picker>
    </view>

    <view style="width: 90%; margin: 100upx auto 0">
      <button
        type="default"
        style="background: #18c7e1; color: #fff"
        @tap="sub"
      >
        保存
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      height: "",
      weight: "",
      user: {},
      birthday: "",
      collectTime: this.config.pub.getDate(),
      params: {
        year: true,
        month: true,
        day: true,
      },
      show: false,
      id: "",
    };
  },
  onLoad(option) {
    //console.log(option)
    this.height = option.sg;
    this.weight = option.tj;
    this.collectTime = option.time.substring(0, 10);
    this.id = option.id;
  },
  onBackPress(e) {
    uni.navigateTo({
      url: "./grow-graph1",
    });
  },
  onReady() {
    // this.getUiStyle();
  },
  methods: {
    getUiStyle() {
      var style = plus.navigator.getUiStyle();
      if ("dark" == style) {
        console.log("当前为暗黑模式");
        uni.setTabBarStyle({
          backgroundColor: "#1B1C1E",
        });
        uni.setNavigationBarColor({
          frontColor: "#ffffff",
          backgroundColor: "#1B1C1E",
          animation: {
            duration: 400,
            timingFunc: "easeIn",
          },
        });
      } else {
        console.log("当前为普通模式");
      }
    },
    checkNum(e, type) {
      let val = e.replace(/(^\s*)|(\s*$)/g, "");
      if (!val) {
        if (type == 1) {
          this.height = "";
        } else if (type == 2) {
          this.weight = "";
        }
        return;
      }
      var reg = /[^\d.]/g;
      // 只能是数字和小数点，不能是其他输入
      val = val.replace(reg, "");
      // // 保证第一位只能是数字，不能是点
      val = val.replace(/^\./g, "");
      // // 小数只能出现1位
      val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      // // 小数点后面保留2位
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
      this.$nextTick(() => {
        if (type == 1) {
          this.height = val;
        } else if (type == 2) {
          this.weight = val;
        }
      });
    },
    dateChange1(e) {
      this.collectTime = e.target.value;
    },
    checkTime() {
      this.show = true;
    },
    getTime(time) {
      let date = new Date();
      let seltime = (time.year + "-" + time.month + "-" + time.day).replace(
        /-/g,
        "/"
      );
      let fin = new Date(seltime).getTime(); //选择的时间
      let birthday = new Date(this.$store.state.birthday).getTime();
      if (birthday >= fin || fin >= date) {
        uni.showToast({
          title: "请选择正确的时间区间",
          icon: "none",
        });
      } else {
        this.collectTime = time.year + "-" + time.month + "-" + time.day;
      }
    },
    // 保存
    sub() {
      if (
        this.height >= 40 &&
        this.height <= 150 &&
        this.weight >= 1 &&
        this.weight <= 50
      ) {
        let self = this;
        uni.showLoading({ title: "加载中", mask: true });
        setTimeout((s) => {
          uni.hideLoading();
        }, 5000);
        this.config
          .post("/childrenInfo/childrenQxRecord", {
            height: this.height,
            weight: this.weight,
            createTime: this.collectTime,
            id: this.id || "",
          })
          .then((res) => {
            uni.hideLoading();
            if (res.data.code === 200) {
              uni.showToast({ title: res.data.msg, icon: "none" });
              uni.redirectTo({
                url: "./grow-graph",
              });
            } else {
              if (res.data.code == "-201") {
                self.config.handleError(res.data);
              } else {
                uni.showToast({
                  title: self.config.handleError(res.data),
                  icon: "none",
                });
              }
            }
          });
      } else {
        uni.showToast({
          title: "身高的区间为40cm-120cm，体重的区间为1kg-50kg",
          icon: "none",
        });
      }
    },
  },
};
</script>


<style lang="less" scoped>
.inp-group {
  padding: 0 20upx;
  margin: 30upx 0;
  .inp-title {
    width: 200upx;
  }
}
</style>
<style scoped>
@media (prefers-color-scheme: closedark) {
  .bd {
    background-color: #1b1c1e !important;
    height: calc(100vh - var(--window-top));
    padding-top: 40rpx;
  }
  .bd1 {
    background-color: #38383c !important;
  }
  .t1 {
    color: #ccc !important;
  }
  >>> input {
    color: #ccc !important;
  }
}
@media (prefers-color-scheme: light) {
  page {
    background-color: #f7f7f7;
  }
}
</style>